<#escape x as x?html>
<div class="box box-solid box-fusion no-shadow no-border">
    <div class="box-body no-padding">
        <div class="row">
            <div class="box box-solid box-fusion no-shadow no-border">
                <div class="box-header">
                    <i class="fa fa-cogs text-primary"></i>
                    <h3 class="box-title">
                        应用发布情况
                    </h3>
                </div>
                <div class="box-body">
                    <div id="appStatePieChart">
                        <div class="row" style="height:400px;background:url('/assets/img/bg_box.png');
            background-position: center;background-repeat:no-repeat;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box box-solid box-fusion no-shadow no-border">
            <div class="box-header" style="margin-left: -8px">
                <i class="fa fa-cogs text-primary"></i>
                <h3 class="box-title">
                    应用发布情况列表
                </h3>
            </div>
        </div>
        <div class="row nav-tabs-custom nav-fusion" style="margin-left: 15px;margin-right: 15px">
            <ul class="nav nav-tabs">
                <li href="#TEST" data-toggle="tab" class="action-tab" name="TEST">
                    <div>测试阶段</div>
                </li>
                <li href="#APPLYING" data-toggle="tab" class="action-tab" name="APPLYING">
                    <div>申请发布中</div>
                </li>
                <li href="#PUBLISHED" data-toggle="tab" class="action-tab" name="PUBLISHED">
                    <div>已发布</div>
                </li>
                <li href="#DEPRECATED" data-toggle="tab" class="action-tab" name="DEPRECATED">
                    <div>已弃用</div>
                </li>
            </ul>
        </div><!-- /.box-body -->
        <div class="tab-content main">
            <div class="tab-pane active" id="TEST">loading.</div>
            <div class="tab-pane" id="APPLYING">loading..</div>
            <div class="tab-pane" id="PUBLISHED">loading...</div>
            <div class="tab-pane" id="DEPRECATED">loading....</div>
        </div>
        <@y.htmlModal type="save" width="750px"/>
    </div><!-- /.box -->
    <script>
        context.call([
            "core",
            "list",
            "appStatistics",
        ], function (core, list, appStatistics) {
            core.setHeight("#appStatePieChart", ".col-md-12");
            list.addViewEventOnly("#modal", "/console/app");
            appStatistics.pie();

            var path = "/app/statistics/appStatePieListPart/";

            $("#TEST").load(core.getUrl(path + "TEST"));

            $(".action-tab").on("click", function (e) {
                var id = $(this).attr("name");
                $("#" + id).load(core.getUrl(path + id));
            })
        });
    </script>
</#escape>